JavaScript modullari quruvchisi usuli: Murakkab obyektlarni yig'ish

Zamonaviy JavaScript-ni ishlab chiqishda murakkab obyektlarni samarali yaratish va boshqarish kengaytiriladigan va saqlanadigan ilovalarni yaratish uchun juda muhimdir. Modul quruvchi naqshi modulli tuzilish ichida obyektni qurish mantiqini kapsulyatsiya qilish uchun kuchli yondashuvni taqdim etadi. Ushbu naqsh modulli, obyekt kompozitsiyasi va Quruvchi dizayn naqshining afzalliklarini birlashtirib, ko'plab xususiyatlar va bog'liqliklarga ega bo'lgan murakkab obyektlarni yaratishni soddalashtiradi.

JavaScript modullarini tushunish

JavaScript modullari - bu funksionallikni kapsulyatsiya qiladigan va o'zaro ta'sir qilish uchun maxsus interfeyslarni taqdim etadigan o'z-o'zidan tarkib topgan kod birliklari. Ular kodni tashkil qilish, qayta foydalanish va ichki o'zgaruvchilar va funktsiyalar uchun shaxsiy sohani taqdim etish orqali nom konfliktlarini oldini oladi.

Modul formatlari

Tarixan JavaScript turli xil modul formatlari orqali rivojlandi, ularning har biri o'z sintaksisi va xususiyatlariga ega:

• IIFE (Darhol chaqiriladigan funktsiya ifodasi): Kodni darhol bajariladigan funktsiyaga o'rash orqali shaxsiy sohalarni yaratishning dastlabki yondashuvi.
• CommonJS: Node.js-da keng qo'llaniladigan modul tizimi, bu erda modullar require() va module.exports yordamida aniqlanadi.
• AMD (Asinxron modul ta'rifi): Brauzerlarda modullarning asinxron yuklanishi uchun mo'ljallangan, ko'pincha RequireJS kabi kutubxonalar bilan birga ishlatiladi.
• ES modullari (ECMAScript modullari): ES6 (ECMAScript 2015) da kiritilgan standart modul tizimi, import va export kalit so'zlaridan foydalanadi.

ES modullari standartlashtirish va brauzerlarda va Node.js-da mahalliy qo'llab-quvvatlashi tufayli zamonaviy JavaScript-ni ishlab chiqish uchun hozirgi kunda afzal qilingan yondashuvdir.

Modullardan foydalanishning afzalliklari

• Kodni tashkil qilish: Modullar tegishli funksionallikni alohida fayllarga guruhlash orqali strukturaviy kod bazasini yaratishga yordam beradi.
• Qayta foydalanish: Modullardan ilovaning turli qismlarida yoki bir nechta loyihalarda osongina qayta foydalanish mumkin.
• Kapsulyatsiya: Modullar ichki amalga oshirish tafsilotlarini yashiradi va faqat o'zaro ta'sir qilish uchun zarur interfeyslarni ochib beradi.
• Bog'liqliklarni boshqarish: Modullar o'zlarining bog'liqliklarini aniq e'lon qiladi, bu kodning turli qismlari o'rtasidagi munosabatlarni tushunish va boshqarishni osonlashtiradi.
• Saqlanishi: Modulli kodni saqlash va yangilash osonroq, chunki bitta modulda o'zgarishlar ilovaning boshqa qismlariga kamroq ta'sir qiladi.

Quruvchi dizayn naqshi

Quruvchi naqshi - bu murakkab obyektni uning ifodasidan ajratadigan yaratuvchi dizayn naqshidir. U murakkab obyektlarni bosqichma-bosqich qurishga imkon beradi, yaratish jarayonini ko'proq nazorat qilish imkonini beradi va konstruktorlarning ko'plab parametrlar bilan to'ldirilgan konstruktor muammosini oldini oladi.

Quruvchi naqshining asosiy komponentlari

• Quruvchi: Obyektning turli qismlarini yaratish usullarini belgilaydigan interfeys yoki mavhum sinf.
• Konkret quruvchi: Quruvchi interfeysining aniq amalga oshirilishi, obyekt qismlarini yaratish uchun o'ziga xos mantiqni taqdim etadi.
• Direktor: (Ixtiyoriy) Obyektni muayyan ketma-ketlikda tegishli quruvchi usullarini chaqirish orqali qurilish jarayonini muvofiqlashtiradigan sinf.
• Mahsulot: Qurilayotgan murakkab obyekt.

Quruvchi naqshidan foydalanishning afzalliklari

• O'qishni yaxshilandi: Quruvchi naqshi obyektni qurish jarayonini o'qiladigan va tushunarli qiladi.
• Moslashuvchanlik: U bir xil qurilish jarayonidan foydalangan holda obyektning turli xil variantlarini yaratishga imkon beradi.
• Nazorat: U qurilish jarayonini nozik nazorat qilish imkonini beradi, bu sizga obyektni o'ziga xos talablarga muvofiq sozlashga imkon beradi.
• Kamroq murakkablik: U ko'plab xususiyatlar va bog'liqliklarga ega murakkab obyektlarni yaratishni soddalashtiradi.

JavaScript-da modul quruvchi naqshini amalga oshirish

Modul quruvchi naqshi murakkab obyektlarni yaratish uchun mustahkam va moslashuvchan yondashuvni yaratish uchun JavaScript modullari va Quruvchi dizayn naqshining kuchli tomonlarini birlashtiradi. Keling, ES modullaridan foydalanib, ushbu naqshni qanday amalga oshirishni ko'rib chiqaylik.

Misol: Konfiguratsiya ob'ektini yaratish

Veb-ilovasi uchun konfiguratsiya ob'ektini yaratishingiz kerakligini tasavvur qiling. Ushbu obyekt API oxirgi nuqtalari, ma'lumotlar bazasi ulanishlari, autentifikatsiya provayderlari va boshqa ilovaga xos konfiguratsiyalar uchun sozlamalarni o'z ichiga olishi mumkin.

1. Konfiguratsiya ob'ektini aniqlang

Birinchidan, konfiguratsiya ob'ektining tuzilishini aniqlang:

// config.js

export class Configuration {
  constructor() {
    this.apiEndpoint = null;
    this.databaseConnection = null;
    this.authenticationProvider = null;
    this.cacheEnabled = false;
    this.loggingLevel = 'info';
  }

  // Ixtiyoriy: Konfiguratsiyani tasdiqlash uchun usul qo'shing
  validate() {
    if (!this.apiEndpoint) {
      throw new Error('API oxirgi nuqtasi talab qilinadi.');
    }
    if (!this.databaseConnection) {
      throw new Error('Ma'lumotlar bazasi ulanishi talab qilinadi.');
    }
  }
}

2. Quruvchi interfeysini yarating

Keyinchalik, turli konfiguratsiya xususiyatlarini o'rnatish usullarini belgilaydigan quruvchi interfeysini aniqlang:

// configBuilder.js

export class ConfigurationBuilder {
  constructor() {
    this.config = new Configuration();
  }

  setApiEndpoint(endpoint) {
    throw new Error('Usul amalga oshirilmagan.');
  }

  setDatabaseConnection(connection) {
    throw new Error('Usul amalga oshirilmagan.');
  }

  setAuthenticationProvider(provider) {
    throw new Error('Usul amalga oshirilmagan.');
  }

  enableCache() {
    throw new Error('Usul amalga oshirilmagan.');
  }

  setLoggingLevel(level) {
    throw new Error('Usul amalga oshirilmagan.');
  }

  build() {
    throw new Error('Usul amalga oshirilmagan.');
  }
}

3. Konkret quruvchini amalga oshiring

Endi, quruvchi interfeysini amalga oshiradigan konkret quruvchini yarating. Ushbu quruvchi konfiguratsiya xususiyatlarini o'rnatish uchun haqiqiy mantiqni taqdim etadi:

// appConfigBuilder.js

import { Configuration } from './config.js';
import { ConfigurationBuilder } from './configBuilder.js';

export class AppConfigurationBuilder extends ConfigurationBuilder {
  constructor() {
    super();
  }

  setApiEndpoint(endpoint) {
    this.config.apiEndpoint = endpoint;
    return this;
  }

  setDatabaseConnection(connection) {
    this.config.databaseConnection = connection;
    return this;
  }

  setAuthenticationProvider(provider) {
    this.config.authenticationProvider = provider;
    return this;
  }

  enableCache() {
    this.config.cacheEnabled = true;
    return this;
  }

  setLoggingLevel(level) {
    this.config.loggingLevel = level;
    return this;
  }

  build() {
    this.config.validate(); // Qurishdan oldin tasdiqlang
    return this.config;
  }
}

4. Quruvchidan foydalanish

Nihoyat, konfiguratsiya ob'ektini yaratish uchun quruvchidan foydalaning:

// main.js

import { AppConfigurationBuilder } from './appConfigBuilder.js';

const config = new AppConfigurationBuilder()
  .setApiEndpoint('https://api.example.com')
  .setDatabaseConnection('mongodb://localhost:27017/mydb')
  .setAuthenticationProvider('OAuth2')
  .enableCache()
  .setLoggingLevel('debug')
  .build();

console.log(config);

Misol: Foydalanuvchi profili ob'ektini yaratish

Keling, Foydalanuvchi profili ob'ektini yaratmoqchi bo'lgan yana bir misolni ko'rib chiqaylik. Ushbu obyekt shaxsiy ma'lumotlar, aloqa tafsilotlari, ijtimoiy media havolalari va imtiyozlarni o'z ichiga olishi mumkin.

1. Foydalanuvchi profili ob'ektini aniqlang

// userProfile.js

export class UserProfile {
  constructor() {
    this.firstName = null;
    this.lastName = null;
    this.email = null;
    this.phoneNumber = null;
    this.address = null;
    this.socialMediaLinks = [];
    this.preferences = {};
  }
}

2. Quruvchini yarating

// userProfileBuilder.js

import { UserProfile } from './userProfile.js';

export class UserProfileBuilder {
  constructor() {
    this.userProfile = new UserProfile();
  }

  setFirstName(firstName) {
    this.userProfile.firstName = firstName;
    return this;
  }

  setLastName(lastName) {
    this.userProfile.lastName = lastName;
    return this;
  }

  setEmail(email) {
    this.userProfile.email = email;
    return this;
  }

  setPhoneNumber(phoneNumber) {
    this.userProfile.phoneNumber = phoneNumber;
    return this;
  }

  setAddress(address) {
    this.userProfile.address = address;
    return this;
  }

  addSocialMediaLink(platform, url) {
    this.userProfile.socialMediaLinks.push({ platform, url });
    return this;
  }

  setPreference(key, value) {
    this.userProfile.preferences[key] = value;
    return this;
  }

  build() {
    return this.userProfile;
  }
}

3. Quruvchidan foydalanish

// main.js

import { UserProfileBuilder } from './userProfileBuilder.js';

const userProfile = new UserProfileBuilder()
  .setFirstName('John')
  .setLastName('Doe')
  .setEmail('john.doe@example.com')
  .setPhoneNumber('+1-555-123-4567')
  .setAddress('123 Main St, Anytown, USA')
  .addSocialMediaLink('LinkedIn', 'https://www.linkedin.com/in/johndoe')
  .addSocialMediaLink('Twitter', 'https://twitter.com/johndoe')
  .setPreference('theme', 'dark')
  .setPreference('language', 'en')
  .build();

console.log(userProfile);

Ilg'or texnikalar va masalalar

Silliq interfeys

Yuqoridagi misollar quruvchining har bir usuli quruvchi instansiyasini o'zi qaytaradigan silliq interfeysdan foydalanishni namoyish etadi. Bu usul zanjirlash imkonini beradi, bu obyektni qurish jarayonini aniq va o'qiladigan qiladi.

Direktor sinfi (Ixtiyoriy)

Ba'zi hollarda, qurilish jarayonini muvofiqlashtirish uchun Direktor sinfidan foydalanishingiz mumkin. Direktor sinfi obyektni muayyan ketma-ketlikda yaratish mantiqini kapsulyatsiya qiladi, bu sizga bir xil qurilish jarayonidan turli quruvchilar bilan qayta foydalanishga imkon beradi.

// director.js

export class Director {
  constructor(builder) {
    this.builder = builder;
  }

  constructFullProfile() {
    this.builder
      .setFirstName('Jane')
      .setLastName('Smith')
      .setEmail('jane.smith@example.com')
      .setPhoneNumber('+44-20-7946-0532') // UK phone number
      .setAddress('10 Downing Street, London, UK');
  }

  constructMinimalProfile() {
    this.builder
      .setFirstName('Jane')
      .setLastName('Smith');
  }
}

// main.js

import { UserProfileBuilder } from './userProfileBuilder.js';
import { Director } from './director.js';

const builder = new UserProfileBuilder();
const director = new Director(builder);

director.constructFullProfile();
const fullProfile = builder.build();

console.log(fullProfile);

director.constructMinimalProfile();
const minimalProfile = builder.build();

console.log(minimalProfile);

Asinxron operatsiyalarni boshqarish

Agar obyektni qurish jarayoni asinxron operatsiyalarni o'z ichiga olsa (masalan, API dan ma'lumotlarni olish), siz bu operatsiyalarni boshqarish uchun quruvchi usullarida async/await dan foydalanishingiz mumkin.

// asyncBuilder.js

import { Configuration } from './config.js';
import { ConfigurationBuilder } from './configBuilder.js';

export class AsyncConfigurationBuilder extends ConfigurationBuilder {
  async setApiEndpoint(endpointUrl) {
    try {
      const response = await fetch(endpointUrl);
      const data = await response.json();
      this.config.apiEndpoint = data.endpoint;
      return this;
    } catch (error) {
      console.error('API oxirgi nuqtasini olishda xatolik:', error);
      throw error; // Xatolikni yuqoriga qayta tashlang
    }
  }

  build() {
    return this.config;
  }
}

// main.js

import { AsyncConfigurationBuilder } from './asyncBuilder.js';

async function main() {
  const builder = new AsyncConfigurationBuilder();
  try {
    const config = await builder
      .setApiEndpoint('https://example.com/api/endpoint')
      .build();
    console.log(config);
  } catch (error) {
    console.error('Konfiguratsiyani yaratishda muvaffaqiyatsizlik:', error);
  }
}

main();

Tasdiqlash

U yaratilishidan oldin obyektning zaruriy mezonlarga javob berishini ta'minlash uchun uni tasdiqlash juda muhimdir. Tasdiqlash tekshiruvlarini bajarish uchun obyekt sinfiga yoki quruvchiga validate() usulini qo'shishingiz mumkin.

O'zgarmaslik

Tasodifiy o'zgarishlarning oldini olish uchun u qurilganidan keyin obyektni o'zgarmas qilish haqida o'ylab ko'ring. Obyektni faqat o'qish uchun qilish uchun Object.freeze() kabi texnikalardan foydalanishingiz mumkin.

Modul quruvchi naqshining afzalliklari

• Kodni yaxshilandi: Modul quruvchi naqshi obyektni qurish mantiqini modulli tuzilish ichida kapsulyatsiya qilish orqali strukturaviy kod bazasini yaratishga yordam beradi.
• Qayta foydalanishni oshirdi: Quruvchi obyektning turli xil konfiguratsiyalari bilan turli xil variantlarini yaratish uchun qayta ishlatilishi mumkin.
• O'qishni yaxshilandi: Quruvchi naqshi obyektni qurish jarayonini, ayniqsa ko'plab xususiyatlarga ega bo'lgan murakkab obyektlar uchun o'qiladigan va tushunarli qiladi.
• Kattaroq moslashuvchanlik: U qurilish jarayonini nozik nazorat qilishni ta'minlaydi, bu sizga obyektni o'ziga xos talablarga muvofiq sozlashga imkon beradi.
• Kamroq murakkablik: U ko'plab xususiyatlar va bog'liqliklarga ega bo'lgan murakkab obyektlarni yaratishni soddalashtiradi, konstruktor muammosidan qochadi.
• Sinov qobiliyati: Obyektni yaratish mantiqini izolyatsiyada sinab ko'rish osonroq.

Haqiqiy dunyoda foydalanish holatlari

• Konfiguratsiyani boshqarish: Veb-ilovalar, API-lar va mikroservislar uchun konfiguratsiya ob'ektlarini yaratish.
• Ma'lumotlarni uzatish ob'ektlari (DTO): Ilovaning turli qatlamlari o'rtasida ma'lumotlarni uzatish uchun DTO-larni yaratish.
• API so'rov ob'ektlari: Turli parametrlari va sarlavhalari bilan API so'rov ob'ektlarini yaratish.
• UI komponentini yaratish: Ko'plab xususiyatlar va voqea ishlovchilariga ega murakkab UI komponentlarini yaratish.
• Hisobot yaratish: Sozlanishi tuzilishi va ma'lumotlar manbalariga ega hisobotlarni yaratish.

Xulosa

JavaScript modul quruvchi naqshi murakkab obyektlarni modulli va saqlanadigan tarzda yaratish uchun kuchli va moslashuvchan yondashuvni taqdim etadi. JavaScript modullari va Quruvchi dizayn naqshining afzalliklarini birlashtirib, siz murakkab obyektlarni yaratishni soddalashtirishingiz, kodni tashkil qilishni yaxshilashingiz va ilovalaringizning umumiy sifatini oshirishingiz mumkin. Konfiguratsiya ob'ektlari, foydalanuvchi profillari yoki API so'rov ob'ektlarini yaratayotgan bo'lsangiz ham, Modul quruvchi naqshi sizga yanada mustahkam, kengaytiriladigan va saqlanadigan kod yaratishga yordam beradi. Ushbu naqsh dunyo bo'ylab ishlab chiquvchilarga tushunish, o'zgartirish va kengaytirish oson bo'lgan ilovalarni yaratishga imkon beruvchi turli global kontekstlarda juda qo'llaniladi.